<template>
    <div class="sign-body f f-col f-ac f-js">
        <div class="sign-form">
            <template>
                <div class="label f f-ac">{{ title }}</div>
                <el-input v-model="titleContent" :disabled="true" />
            </template>
            <!-- <template v-if="address">
        <div class="label f f-ac">详细地址</div>
        <el-input v-model="signForm.address" placeholder="请输入详细地址" />
      </template> -->
            <template>
                <div class="label f f-ac">姓名</div>
                <el-input v-model="signForm.name" placeholder="请输入姓名" />
            </template>
            <template v-if="sex">
                <div class="label f f-ac">性别</div>
                <el-select v-model="signForm.sex" placeholder="请选择性别">
                    <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </template>
            <template v-if="chooseTime">
                <div class="label f f-ac">报名时间</div>
                <el-date-picker v-model="chooseTime" type="date" value-format="yyyy-MM-dd" placeholder="选择报名时间"
                    :disabled="true" />
            </template>
            <template>
                <div class="label f f-ac">年龄</div>
                <el-input v-model="signForm.age" placeholder="请输入年龄" />
            </template>
            <template >
                <div class="label f f-ac">手机号码</div>
                <el-input v-model.trim.number="signForm.phone" placeholder="请输入手机号码" maxlength="11" />
            </template>
            <template >
                <div class="label f f-ac">验证码</div>
                <el-input v-model="signForm.code" placeholder="请输入验证码" prefix-icon="el-icon-link"
                    class="mb-20" maxlength="6" clearable>
                    <div slot="suffix" class="login-code" @click="handleSms">
                        {{ codeLabel }}
                    </div>
                </el-input>
            </template>


            <div class="f f-ac f-jb mt-40">
                <!-- :class="{ disabled: disabled }" -->
                <div class="btn f f-ac f-jc" @click="submit">
                    提交
                </div>
                <div v-if="cencel" class="btn-cencel f f-ac f-jc" @click="handleCencel">取消</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        send
    } from "@/utils/home/index.js";
    export default {
        props: {
            // 表单名称
            title: {
                type: String,
                default: "活动名称",
            },
            titleContent: {
                type: String,
                default: "活动名称",
            },
            // 详细地址
            // address: {
            //   type: Boolean,
            //   default: true,
            // },
            // 姓名
            name: {
                type: Boolean,
                default: true,
            },
            // 年龄
            age: {
                type: Number,
                default: 0,
            },
            // 性别
            sex: {
                type: Boolean,
                default: true,
            },
            // 报名时间
            application_time: {
                type: Boolean,
                default: true,
            },
            // 是否选择时间
            chooseTime: {
                type: String,
                default: '',
            },
            // 手机号码
            phone: {
                type: Boolean,
                default: true,
            },
            // 取消按钮
            cencel: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                codeLabel: "发送验证码",
                signForm: {
                    // title: "",
                    name: "",
                    // address: "",
                    age: '',
                    sex: "",
                    application_time: "",
                    phone: "",
                    code:''
                },
                sexList: [{
                        label: "男",
                        value: "1"
                    },
                    {
                        label: "女",
                        value: "2"
                    },
                ],
                timer: null, // 定时器
            };
        },
        computed: {
            // disabled() {
            //   return Object.keys(this.signForm).some((i) => this[i] && !this.signForm[i]);
            // },
        },
        created() {
            if (this.timer) {
                this.codeLabel = "发送验证码";
                clearInterval(this.timer);
                this.timer = null;
            }

        },
        methods: {
            // 发送验证码
            handleSms() {
                if (this.signForm.phone == '') {
                    this.$message({
                        message: '手机号不能为空',
                        type: 'error'
                    });
                    return
                }
                if (this.timer) return;
                this.timer = setInterval(() => {
                    if (this.codeLabel == "发送验证码") {
                        send({
                            mobile: this.signForm.phone,
                            event: 'order'
                        }).then(item => {
                            if (item.code == 200) {
                                this.$message({
                                    message: item.msg,
                                    type: 'success'
                                });
                                this.codeLabel = "60s后重发";
                            }else{
                                clearInterval(this.timer);
                                this.timer = null
                            }
                        })
                    } else {
                        let num = parseInt(this.codeLabel);
                        if (num > 1) {
                            this.codeLabel = `${num - 1}s后重发`;
                        } else {
                            this.codeLabel = "发送验证码";
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }
                }, 1000);
            },
            getTime() {
                let time = new Date()
                let nowTime = this.timestampToTime(time.toLocaleString('en-US', {
                    hour12: false
                }).split(" "))
                this.signForm.application_time = nowTime
            },
            timestampToTime(times) {
                let time = times[1]
                let mdy = times[0]
                mdy = mdy.split('/')
                let month = parseInt(mdy[0]);
                let day = parseInt(mdy[1]);
                let year = parseInt(mdy[2])
                return year + '-' + month + '-' + day + ' ' + time
            },
            // 提交
            submit() {
                this.getTime()
                // this.signForm.=this.titleContent
                console.log(this.signForm, 'this.signForm')
                this.$emit('signForm', this.signForm)
                //   if (this.disabled) return;

            },
            // 取消
            handleCencel() {
                this.$router.go(-1);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .sign-body {
        width: 100%;
        height: 746px;

        .login-code {
            user-select: none;
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            color: #466ec5;

            &:hover {
                cursor: pointer;
                color: #0b4bb7;
            }

            &:active {
                color: #193980;
            }
        }

        .sign-form {
            width: 460px;

            .label {
                color: #333;
                font-size: 14px;
                font-weight: 600;
                height: 40px;
                line-height: 40px;
                margin-top: 20px;

                &::before {
                    content: "";
                    display: inline-block;
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background-color: #ff4d4f;
                    margin-right: 10px;
                }
            }

            .btn {
                user-select: none;
                width: 100%;
                height: 36px;
                text-align: center;
                background-color: #0a4ab6;
                color: #fff;
                border-radius: 5px;

                &:hover {
                    cursor: pointer;
                    background-color: #0c52cb;
                }

                &:active {
                    background-color: #0a4ab6;
                }
            }

            .btn-cencel {
                user-select: none;
                width: 100%;
                height: 36px;
                text-align: center;
                background-color: #fff;
                color: #909090;
                border: 1px solid #d9d9d9;
                border-radius: 5px;
                margin-left: 20px;

                &:hover {
                    cursor: pointer;
                    background-color: #f0f0f0;
                }

                &:active {
                    background-color: #fff;
                }
            }

            .disabled {
                background-color: #909090;
                pointer-events: none;
            }
        }
    }

    ::v-deep .el-select,
    .el-date-editor {
        width: 100%;
    }
</style>